<template>

  <div class="userinfo-detail">
    <div class="userinfo-nickname">
      <span>我的昵称：</span>
    </div>
    <input class="nickname-holder" :value="userInfo.nick_name" />
    <div class="userinfo-intro">
      <span>简介：</span>
    </div>
    <input class="userinfo-intro-holder" :value="userInfo.introduction"/>
    <div class="userinfo-bind-third">
      <span>绑定第三方账号：</span>
    </div>
    <div style="display: inline-block">
      <div style="display: flex" >
        <button class="third-button" @click="bShow()" v-show="userInfo.bid === ''">
          <img
            src="../assets/b_logo.png"
            style="height: 30px; width: 30px; margin: auto"
          />
        </button>
        <div class="third-already-bind" v-show="userInfo.bid !== ''">
          <img
              src="../assets/b_logo.png"
              style="height: 30px; width: 30px; margin: auto"
          />
          <span style="line-height: 35px; font-size: 14px; margin-right: 5px; color: #FFFFFF;">已绑定</span>
        </div>

        <button
          class="third-button"
          style="background: #f3f3f3"
          @click="netEaseShow()" v-show="userInfo.NetCloudId === ''"
        >
          <img
            src="../assets/netease-cloud-music-fill.png"
            style="height: 35px; width: 35px; margin: auto"
          />
        </button>
        <div class="third-already-bind" style="background: #90c2f0" v-show="userInfo.NetCloudId !== ''">
          <img
              src="../assets/netease-cloud-music-fill.png"
              style="height: 30px; width: 30px; margin: auto"
          />
          <span style="line-height: 35px; font-size: 14px; margin-right: 5px; color: #FFFFFF;">已绑定</span>
        </div>
      </div>
    </div>
    <div style="display: flex; flex-direction: column; grid-column-start: 2;grid-column-end: 3;"  v-show="userInfo.bid !== '' || userInfo.NetCloudId !== ''">
      <div class="userinfo-bili-userlist2" v-show="userInfo.bid !== ''">
        <div class="b-user-detail2" @click="toBcom">

          <img class="b_avatar" style="margin-left: 5px; margin-right: 5px" :src="bFace" />

          <div style="flex: 1; justify-self: center">

            <span class="b_name" style="font-family: Pingfang; font-size: 20px; color: pink; margin-right: 5px; margin-left: 5px">{{bName}}</span>
          </div>


            <img
                src="../assets/b_logo.png"
                style="height: 40px; width: 40px; margin-left: 10px; margin-right: 10px"
            />
        </div>
      </div>
      <div class="userinfo-bili-userlist2" v-show="userInfo.NetCloudId !== ''">
        <div class="b-user-detail2" @click="toNetCloud">

          <img class="b_avatar" style="margin-left: 5px" :src="netEaseFace" />
          <div style="flex: 1; justify-self: center">
            <span class="b_name" style="font-family: Pingfang; font-size: 20px; color: #8F8F8F; margin-right: 5px; margin-left: 5px">{{netArtistName}}</span>
          </div>

          <img
              src="../assets/netease-cloud-music-fill.png"
              style="height: 45px; width: 45px; margin-left: 10px; margin-right: 10px"
          />
        </div>
      </div>
    </div>

    <div
      style="
        display: grid;
        grid-template-columns: 160px 300px;
        grid-template-rows: 50px;
      "
      v-if="netEase_show"
    >
      <div class="userinfo-bind-third">
        <span>网易云用户名：</span>
      </div>
      <div style="display: inline-block">
        <div style="display: flex">
          <input
            class="bnickname-holder"
            id="bnickname"
            v-model="netEaseName"
          />
          <button
            type="button"
            class="third-button"
            style="display: flex"
            @click="NetEaseSearch"
          >
            <span style="line-height: 35px; color: #f3f3f3">查询</span>
          </button>
        </div>
      </div>
      <div class="userinfo-bili-userlist">
        <div
          class="b-user-detail"
          :id="item.artistId"
          v-for="item in nInfo"
          :key="item.artistId"
        ><img class="b_avatar" :src="item.img1v1Url" />
          <div style="display: flex">
            <span class="b_name">{{ item.name }}</span>
          </div>
          <div style="display: flex; justify-content: space-around">
           
            <span class="b_follow">音乐数：</span>
            <span class="b_follow">{{ item.musicSize }}</span>
            <span class="b_follow">专辑数：</span>
            <span class="b_follow">{{ item.albumSize }}</span>
            <div class="b_bind_button">
              <span style="line-height: 30px; color: #f3f3f3" @click="bindNetEase(item.artistId, item.name, item.musicSize, item.albumSize, item.img1v1Url)">绑定</span>
            </div>
          </div>
        </div>
      </div>
      <div
        style="grid-column-start: 2; grid-column-end: 3"
        id="404_alert"
        v-if="is_404"
      >
        <span style="color: #b8b8b8">很抱歉没有找到该用户~</span>
      </div>
      <div
        style="grid-column-start: 2; grid-column-end: 3"
        id="input_alert"
        v-if="is_input"
      >
        <span style="color: #b8b8b8">请输入用户名哦~</span>
      </div>
    </div>
    <div
      style="
        display: grid;
        grid-template-columns: 160px 300px;
        grid-template-rows: 50px;
      "
      v-if="b_show"
    >
      <div class="userinfo-bind-third">
        <span>哔哩哔哩用户名：</span>
      </div>
      <div style="display: inline-block">
        <div style="display: flex">
          <input class="bnickname-holder" v-model="bilibibliName" />
          <button
            type="button"
            class="third-button"
            style="display: flex"
            @click="bSearch"
          >
            <span style="line-height: 35px; color: #f3f3f3">查询</span>
          </button>
        </div>
      </div>
      <div class="userinfo-bili-userlist" v-if="b_show">
        <div
          class="b-user-detail"
          :id="item.uid"
          v-for="item in bInfo"
          :key="item.mid"
        >
          <div>
            <img class="b_avatar" :src="item.upic" />
          </div>
          <span class="b_name">{{ item.uname }}</span>
          <div style="display: flex; justify-content: space-around">
            <span class="b_follow">粉丝：</span>
            <span class="b_follow">{{ item.fans }}</span>
            <span class="b_follow">稿件数：</span>
            <span class="b_follow">{{ item.videos }}</span>
            <div class="b_bind_button">
              <span style="line-height: 30px; color: #f3f3f3" @click="bindBilibli(item.mid, item.uname, item.upic)">绑定</span>
            </div>
          </div>

        </div>
      </div>
      <div style="grid-column-start: 2; grid-column-end: 3" v-if="is_404">
        <span style="color: #b8b8b8">很抱歉没有找到该用户~</span>
      </div>
      <div style="grid-column-start: 2; grid-column-end: 3" v-if="is_input">
        <span style="color: #b8b8b8">请输入用户名哦~</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserInfoEdit",
  data() {
    return {
      is_404: false,
      is_input: false,
      bilibibliName: "",
      netEaseName: "",
      bInfo: [],
      nInfo: [],
      bName: "",
      bFace: "",
      netArtistName: "",
      netEaseFace: "",
      b_show: false,
      netEase_show: false,
      userInfo: {},
    };
  },
  mounted() {
    const token = localStorage.getItem("token");
    if (token) {
      this.$ajax({
        method: "post",
        url: process.env.VUE_APP_SERVER + "/login/get_token",
        data: { token },
      }).then((response) => {
        let resp = response.data;
        const { code, data, message } = resp;
        if (code === 200) {
          console.log(data);
          Tool.setLoginUser(data);
        }
        if (code === -1) {
          alert("请登陆")
          this.$router.push('/')
        }
      });
    }
   this.userInfo = JSON.parse(localStorage.getItem("user"))
    if (this.userInfo.bid !== '') {
      this.$ajax
          .get(
              process.env.VUE_APP_SERVER +
              "/biliUser?mid=" +
              this.userInfo.bid,
          )
          .then((response) => {
            this.bFace = response.data.data.face;
            this.bName = response.data.data.name;
            console.log(response.data.data);
          });
    }
    if (this.userInfo.NetCloudId !== '') {
      this.$ajax
          .get(
              process.env.VUE_APP_SERVER +
              "/netease/artist?uid=" +
              this.userInfo.NetCloudId
          ).then((response) => {
            this.netEaseFace = response.data.data.img1v1Url;
            this.netArtistName = response.data.data.name;
            console.log(response.data.data);
          });
    }
  },
  methods: {
    initAlert() {
      this.is_404 = false;
      this.is_input = false;
    },
    bShow() {
      this.b_show = true;
      this.netEase_show = false;
    },
    netEaseShow() {
      this.netEase_show = true;
      this.b_show = false;
    },
    bSearch() {
      this.$ajax
        .get(
          process.env.VUE_APP_SERVER + "/bilinfo?username=" + this.bilibibliName
        )
        .then((response) => {
          this.bInfo = response.data.data;
          this.initAlert();
          if (this.bilibibliName === "") {
            this.is_input = true;
            return;
          } else {
            this.is_input = false;
          }
          if (response.data.data === null) {
            this.is_404 = true;
          } else {
            this.is_404 = false;
          }
          console.log(response.data.data);
        });
    },
    NetEaseSearch() {
      this.$ajax
        .get(
          process.env.VUE_APP_SERVER +
            "/netease/search?keyword=" +
            this.netEaseName
        )
        .then((response) => {
          this.nInfo = response.data.data;
          if (this.netEaseName === "") {
            this.is_input = true;
            return;
          } else {
            this.is_input = false;
          }
          if (response.data.data === null) {
            this.is_404 = true;
          } else {
            this.is_404 = false;
          }
          console.log(response.data.data);
        });
    },
    toBcom() {
      window.open("https://space.bilibili.com/" + this.userInfo.bid, '_blank')
    },
    toNetCloud(){
      window.open("https://music.163.com/#/artist?id=" + this.userInfo.NetCloudId, '_blank')
    },
    bindBilibli(mid, uname, upic) {
      alert(mid)
      this.$ajax
          .get(
              process.env.VUE_APP_SERVER +
              "/bilibilibind?userId=" +
              this.userInfo.id+"&bid="+mid+"&token="+localStorage.getItem("token")
          )
          .then((response) => {
            if (response.data.code !== -1) {
              console.log(localStorage.getItem("user"));
              this.userInfo.bid = mid;
              this.bName = uname;
              this.bFace = upic;
              this.b_show = false;
              Tool.setLoginUser(this.userInfo);
              console.log(localStorage.getItem("user"));
              // window.location.reload()
            }
          });
    },
    bindNetEase(artistID, name, musicSize, albumSize, img1v1Url){
      alert(artistID)
      this.$ajax
          .get(
              process.env.VUE_APP_SERVER +
              "/netEasebind?userId=" +
              this.userInfo.id+"&uid="+artistID+"&token="+localStorage.getItem("token")
          )
          .then((response) => {
            if (response.data.code !== -1) {
              console.log(localStorage.getItem("user"));
              this.userInfo.NetCloudId = artistID;
              this.netArtistName = name;
              this.netEaseFace = img1v1Url;
              this.netEase_show = false;
              Tool.setLoginUser(this.userInfo);
              console.log(localStorage.getItem("user"));
            }
          });
    }
  },
};
</script>
<style type="text/css">
.nickname-holder {
  display: inline-block;
  width: 100%;
  height: 35px;
  border-radius: 10px;
  box-sizing: border-box;
  text-align: left;
  line-height: 35px;
  border: 1px solid #b8b8b8;
  font-family: PingFangSC-Regular, sans-serif;
  font-size: 18px;
  font-weight: 500;
  padding-left: 10px;
  outline-style: wave;
  outline-color: #6f42c1;
}
.bnickname-holder {
  display: inline-block;
  width: 60%;
  height: 35px;
  border-radius: 10px;
  box-sizing: border-box;
  text-align: left;
  line-height: 35px;
  border: 1px solid #b8b8b8;
  font-family: PingFangSC-Regular, sans-serif;
  font-size: 18px;
  font-weight: 500;
  padding-left: 10px;
  margin-right: 10px;
  outline-style: wave;
  outline-color: #6f42c1;
}
.userinfo-intro-holder {
  width: 100%;
  height: 105.13px;
  border-radius: 10px;
  box-sizing: border-box;
  border: 1px solid #b8b8b8;
  outline-style: wave;
  outline-color: #6f42c1;
}
.userinfo-nickname {
  /* 我的昵称： */
  width: 100%;
  height: 35px;
  font-family: AlibabaPuHuiTiM;
  font-size: 18px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: 0em;
  color: #b8b8b8;
}
.userinfo-intro {
  width: 100%;
  height: 35px;
  font-family: AlibabaPuHuiTiM;
  font-size: 18px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: 0em;
  margin-right: 50px;
  color: #b8b8b8;
  grid-row-start: 2;
  grid-row-end: 3;
}
.userinfo-detail {
  padding-left: 50px;
  padding-top: 50px;
  margin: 10px auto;
  width: 100%;
  height: 900px;
  border-radius: 12px;
  background: #ffffff;
  box-sizing: border-box;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 1, 0.1);
  /*border: 1px solid #B8B8B8;*/
  display: grid;
  grid-template-columns: 160px 300px;
  grid-template-rows: 80px 150px 80px 200px;
}
.userinfo-bind-third {
  width: 100%;
  height: 35px;
  font-family: AlibabaPuHuiTiM;
  font-size: 18px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: 0em;
  color: #b8b8b8;
}
.third-button {
  /* 矩形 58 */
  margin-right: 10px;
  display: flex;
  justify-content: center;
  width: 90px;
  height: 35px;
  border-radius: 10px;
  background: pink;
  box-sizing: border-box;
  border-style: none;
  outline-color: #6f42c1;
}
.third-button:hover {
  cursor: pointer;
  border: solid 1px #b8b8b8;
}
.userinfo-bili-userlist {
  overflow-y: auto;
  width: 450px;
  height: 200px;
  border-radius: 7px;
  background: #ffffff;
  box-sizing: border-box;

  grid-column-start: 1;
  grid-column-end: 2;
}
.userinfo-bili-userlist2 {
  /*width: 450px;*/
  /*height: 200px;*/
  width: 500px;
  height: 80px;
  /*box-sizing: border-box;*/
  grid-column-start: 2;
  grid-column-end: 3;
  margin-top: 10px;
}
/*.userinfo-bili-userlist:hover {*/
/*  overflow-y: scroll;*/
/*}*/
.b-user-detail {
  /*border: 1px solid #B8B8B8;*/
  margin-bottom: 20px;
  display: grid;
  width: 100%;
  height: 60px;
  /* grid-template-columns: 60px 100px 45px 60px 60px 45px 80px; */
    grid-template-columns: 60px 100px 1fr;
  grid-template-rows: 1fr;
  line-height: 50px;
}
.b-user-detail2 {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  height: 60px;
  border-radius: 10px;
  background: #e6e6e6;
  text-align: center;
  justify-content: center;
  align-items: center;
 /* grid-template-columns: 60px 100px 45px 60px 60px 45px 80px; */
  /*grid-template-columns: 60px 30px 150px;*/
  /*grid-template-rows: 1fr;*/
}
.b-user-detail2:hover{
  cursor: pointer;
  border: solid 1px #FFFFFF;
}
.b_avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: solid 1px #e6e6e6;
  overflow: hidden;
}
.b_name {
  font-family: HarmonyOS_Sans_SC_Black;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0em;
  color: #000000;
  line-height: 30px;
  align-self: center;
}
.b_follow {
  font-family: HarmonyOS_Sans_SC_Black;
  font-size: 14px;
  font-weight: 200;
  letter-spacing: 0em;
  color: #000000;
  line-height: 20px;
  align-self: center;
}
.b_bind_button {
  /* 矩形 58 */
  display: flex;
  justify-content: center;
  /*text-align: center;*/
  width: 50px;
  height: 30px;
  border-radius: 10px;
  background: pink;
  box-sizing: border-box;
  border-style: none;
  outline-color: #6f42c1;
  align-self: center;
}
.b_bind_button:hover {
  cursor: pointer;
  border: solid 1px #b8b8b8;
}
.third-already-bind {
  /* 矩形 58 */
  margin-right: 10px;
  display: flex;
  justify-content: center;
  width: 90px;
  height: 35px;
  border-radius: 10px;
  background: lightpink;
  box-sizing: border-box;
  border-style: none;
}
</style>
